<template>
  <div>
    <el-dialog
      :title="item.id ? '编辑' : '新增'"
      :visible.sync="editVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="填报单位：">
          <el-select v-model="form.district_id" style="width: 100%" clearable filterable placeholder="请选择填报单位" @change="handleFili">
            <el-option v-for="dist in districtList" :key="dist.id" :label="dist.name" :value="dist.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="角色：">
          <el-select v-model="form.role_names" style="width: 100%" multiple placeholder="请选择填报单位" @change="$forceUpdate()">
            <el-option v-for="role in roleData" :key="role.id" :label="role.name" :value="role.name" />
          </el-select>
        </el-form-item>
        <el-form-item label="姓名：">
          <el-input v-model="form.name" clearable placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="手机号：">
          <el-input v-model="form.phone" clearable placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="邮箱地址：">
          <el-input v-model="form.email" clearable placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item label="密码：">
          <el-input v-model="form.password" placeholder="请输入密码" clearable show-password />
        </el-form-item>
        <el-form-item label="确认密码：">
          <el-input v-model="form.password_confirmation" placeholder="确认密码" clearable show-password />
        </el-form-item>
        <el-form-item label="备注：">
          <el-input v-model="form.desc" clearable type="textarea" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button v-preventReClick="3000" type="primary" @click="onSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getRoleList, getDistrictList, updateAccount, createAccount } from '@/api/authority'
export default {
  props: {
    editVisible: {
      type: Boolean,
      default: false
    },
    item: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      form: {
        name: '',
        district_id: '',
        phone: '',
        email: '',
        password: '',
        password_confirmation: '',
        desc: '',
        role_names: []
      },
      roleData: [],
      districtList: [],
      fileList: []
    }
  },
  created() {
    this.getDistirct()
    if (this.item.id) {
      this.form = { ...this.item }
      this.handleFili(this.item.district_id)
      this.form.role_names = this.form.roles.map(item => item.name)
    }
  },
  methods: {
    onSubmit() {
      // const roleArr = []
      // this.roleData.forEach(item => {
      //   roleArr.push(item.id)
      // })
      // const obj = this.roleData.filter(item => item.id == this.form.role_name)
      const saveItem = { ...this.form, id: this.item.id }
      if (this.item.id) {
        updateAccount(saveItem).then(res => {
          if (res.status === 200) {
            this.$emit('changeResult', true)
            this.$message({
              message: '保存成功',
              type: 'success'
            })
          }
        })
      } else {
        createAccount(saveItem).then(res => {
          if (res.status === 200) {
            this.$emit('changeResult', true)
            this.$message({
              message: '保存成功',
              type: 'success'
            })
          }
        })
      }
    },
    handleClose() {
      this.$emit('changeResult', false)
    },
    handleFili(val) {
      this.fetchData(val)
    },
    fetchData(type) {
      this.listLoading = true
      getRoleList({ type: +type === 1 ? 1 : 2 }).then(response => {
        this.roleData = response.data
      })
    },
    getDistirct() {
      getDistrictList({ page: 1, page_size: 1000 }).then(res => {
        this.districtList = res.data
      })
    }
  }
}
</script>
